<template>
	<svg :class="svgClass" aria-hidden="true">
		<use :xlink:href="iconClassName"></use>
	</svg>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'

  interface IProps {
    className?: string
    iconName: string
  }

  const props = defineProps<IProps>()

  const svgClass = computed(() => ['svg-icon', props.className || null])

  const iconClassName = computed(() => `#${props.iconName}`)
</script>

<style lang="less" scoped>
  .svg-icon {
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
</style>
